import { Button, Image, Input } from "antd";
import { useState } from "react";
import { API } from "../../config";
import { updateItem } from "../../helpers/cart";
import { handleDel } from "../../helpers/cart";

export default function CartItem({ product, cartItem }) {
    const [count, setCount] = useState(product.count)
    const handlChange = e => {
        const count = e.target.value
        setCount(count)
        cartItem(updateItem(product._id, count))
    }
    return (
        <tr key={product._id} className="ant-table-row">
            <td className="ant-table-cell">
                <Image width={120} src={`${API}/product/photo/${product._id}`} />
            </td>
            <td className="ant-table-cell">{product.name}</td>
            <td className="ant-table-cell">{product.price}</td>
            <td className="ant-table-cell">{product.category.name}</td>
            <td className="ant-table-cell">
                <Input type='number' value={count} onChange={handlChange} />
            </td>
            <td className="ant-table-cell">
                <Button danger onClick={() => cartItem(handleDel(product._id))} type='primary'>删除</Button>
            </td>
        </tr>
    )
}